<template>
  <div class="app-container home">
    <ul class="roomOverview clearfix" >
      <li>
        <div>{{top.daySubscribe}}</div>
        <p>今日关注量(人)</p>
        <div>{{top.dayRegister}}</div>
        <p>今日注册量(人)</p>
      </li>
      <li>
        <div>{{top.dayBiz}}</div>
        <p>今日营业额(元)</p>
        <div>{{top.monthBiz}}</div>
        <p>当月营业额(元)</p>
      </li>
      <li>
        <div>{{top.dayOrderNum}}</div>
        <p>今日订单量(单)</p>
        <div>{{top.monthOrderNum}}</div>
        <p>当月订单量(单)</p>
      </li>
      <li>
        <div>{{top.monthSubscribe}}</div>
        <p>当月关注量(人)</p>
        <div>{{top.monthRegister}}</div>
        <p>当月注册量(人)</p>
      </li>
      <li>
        <div>{{top.dayIncome}}</div>
        <p>今日收益额(元)</p>
        <div>{{top.monthIncome}}</div>
        <p>当月收益额(元)</p>
      </li>
      <li>
        <div>{{top.dayWithdraw}}</div>
        <p>今日技师提现额(元)</p>
        <div>{{top.monthWithdraw}}</div>
        <p>当月技师提现额(元)</p>
      </li>
    </ul>
    <div>
      <!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> -->
    </div>
    <!-- <div ref="echartsRef" class="echarts" ></div> -->
  </div>
</template>

<script>
import {queryHome} from "@/api/home/home";
import * as echarts from 'echarts'
export default {
  name: "Index",
  data() {
    return {
      top:{},
    };
  },
  created() {
    this.getHome();
    this.$nextTick(() => {this.echartsInit()});

  },
  methods: {
    /** 查询产品入库列表 */
    getHome() {
      queryHome().then(response => {
        this.top = response.data;
      });
    },
    echartsInit(){
      const option={
          title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
      }

      const echartsRef = this.$refs.echartsRef
      const myChart = echarts.init(echartsRef)
      myChart.setOption(option)
    }
  },
  // mounted(){
  //   this.$nextTick(() => {this.echartsInit()})
  // }
};
</script>
<style scoped lang="scss">
  .roomOverview{
    margin: 0 0 10px;
    padding: 0 0;
    width: 100%;
    li{
      float: left;
      margin-right: 1%;
      width: 32%;
      height: 200px;
      list-style: none;
      text-align: center;
      div{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 64px;
        line-height: 64px;
        font-size: 40px;
        span{
          width: 49%;
          font-size: 20px;
        }
        i{
          font-size: 30px;
          font-weight: 200;
        }
      }
      p{
        margin: 0 0;
        padding: 0 0;
        font-size: 14px;
        height: 36px;
        line-height: 36px;
        color:#fff;
        font-weight: 600;
      }
    }
    li:first-child{
      background: #E8F4FF;
      div{
        color:#1890FF;
      }
      p{
        background: #1890FF;
      }
    }
    li:nth-child(2){
      background: #E7FAF0;
      div{
        color:#13CE70;
      }
      p{
        background: #13CE70;
      }
    }
    li:nth-child(3){
      background: #FFF8E6;
      div{
        color:#FFC034;
      }
      p{
        background: #FFC034;
      }
    }
    li:nth-child(4){
      background: #DDE3FB;
      div{
        color:#6681EB;
      }
      p{
        background: #6681EB;
      }
    }
    li:nth-child(5){
      background: #ebdfff;
      div{
        color:#7118ff;
      }
      p{
        background: #7118ff;
      }
    }
    li:nth-child(6){
      background: #dffeff;
      div{
        color:#13c8ce;
      }
      p{
        background: #13c8ce;
      }
    }
  }
  // .small li:first-child{
  //   width: 100px;

  // }
  .echarts {
    width: 500px;
    height: 300px;
    margin: 0 2%;
  }
</style>

